<!--
 * @Author: thats-all-right-ha-ha 8280209+thats-all-right-ha-ha@user.noreply.gitee.com
 * @Date: 2024-02-24 19:50:04
 * @LastEditors: thats-all-right-ha-ha 8280209+thats-all-right-ha-ha@user.noreply.gitee.com
 * @LastEditTime: 2024-02-24 22:20:37
 * @FilePath: \计划便签\index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            color: red
        }

        input:checked + p {
      background: #F9F9F9;
      text-decoration: line-through;
    }
    </style>
</head>

<body>
    <input type="checkbox">
    <p>今日计划</p>
    <input type="checkbox">
    <p>今日计划</p>
    <input type="checkbox">
    <p>今日计划</p>
    <input type="checkbox">
    <p>今日计划</p>
    <input type="checkbox">
    <p>今日计划</p>
  
 
 

    <script>
        let g = true
        const checkbox = document.querySelectorAll('input')
        const checkboxs = Array.from(checkbox)
        let enter = null
        let indexStart
        let indexEnd
        checkbox.forEach(item => {
            item.addEventListener('change', (e) => {
                if (g) {
                    indexStart = checkboxs.findIndex(item => item === e.target)
                }
                if (enter === 'Shift') {
                    indexEnd = checkboxs.findIndex(item => item === e.target)
                    if (indexStart > indexEnd) {
                        checkboxs.slice(indexEnd, indexStart).forEach((item, index) => {
                            item.checked = true
                        })
                    } else {
                        checkboxs.slice(indexStart, indexEnd).forEach((item, index) => {
                            item.checked = true
                        }
                        )
                    }
                }
            })
        })
        document.addEventListener('keydown', (e) => {
            enter = e.key
            g = false
        })
        document.addEventListener('keyup', () => {
            enter = null;
            g = true
            indexEnd = null
        })
    </script>
</body>

</html>